<template>
  <div>
    <!-- 年度开工率 -->
    <Echart
      :options="options"
      id="bottomLeftChart"
      height="480px"
      width="100%"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart'

export default {
  data() {
    return {
      options: {},

    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    },
  },
  watch: {
    cdata: {
      handler(newData) {
        this.options={
  title: {
    text: '漏洞分布',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 60,
    top: 20
  },
  color:['#850204', '#cf5b13', '#c4d512', '#2fbc94', '#236ee1'],
  series: [
    {
      name: '漏洞个数',
      type: 'pie',
      radius: ['40%', '70%'],
      data: [
          { value: 0, name: '紧急' },
          { value: 0, name: '高危' },
          { value: 10, name: '中危' },
          { value: 34, name: '低危' },
          { value: 15, name: '信息' }
        ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        },
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        },
      }
    }
  ],
  graphic:{
            elements:[
            {
              type:"image",
              style:{
                image:require("@/assets/alert.png"),
                width:100,
                height:100,
              },
              left:"10%",
              top:"60%",
            },
            ],
          },
        }
  //       this.options = {
  //         tooltip: {
  //           trigger: 'item'
  //         },
  //         legend: {
  //           top: '5%',
  //           left: 'center'
  //         },
  //         color:['#850204', '#cf5b13', '#c4d512', '#2fbc94', '#236ee1'],
  //         series: [
  //         {
  //           name: '漏洞个数',
  //           type: 'pie',
  //           radius: ['40%', '70%'],
  //           avoidLabelOverlap: false,
  //           itemStyle: {
  //           borderRadius: 10,
  //           borderColor: '#fff',
  //           borderWidth: 2,
  //       },
  //       label: {
  //         show: false,
  //         position: 'center'
  //       },
  //       emphasis: {
  //         label: {
  //           show: true,
  //           fontSize: 40,
  //           fontWeight: 'bold'
  //         }
  //       },
  //       labelLine: {
  //         show: false
  //       },
  //       data: [
  //         { value: 0, name: '紧急' },
  //         { value: 0, name: '高危' },
  //         { value: 10, name: '中危' },
  //         { value: 34, name: '低危' },
  //         { value: 15, name: '信息' }
  //       ]
  //     }
  //   ]
  // }
      },
      immediate: true,
      deep: true
    }
  }
};


// export default {
//   data() {
//     return {
//       options: {},
//       topoId: "",
//       nodes: null,
//       edges: null,
//       echartsDataNodes: [],
//       echartsDataEdges: [],
//     };
//   },
//   methods: {
//     getTopoList() {
//       // 获取网络拓扑图
//       getTopo().then(res => {
//         console.log(res);
//         this.topoList = res.data;

//         let len = res.data.length;
//         console.log(len);
//         let index = Math.floor(Math.random(0, len));
//         console.log(index)
//         this.selectTopoById(res.data[index].topoId);
//       });
//     },
//     selectTopoById(topoId) {
//       //根据topoId查询拓扑图数据
//       selectTopoById(topoId).then(response => {
//         var res = response.data;
//         var nodes = [];
//         let i = 0;
//         res.nodes.forEach(node => {
//           nodes.push({
//             name: node.nodeId + "",
//             x : Math.sin(Math.PI / 18 * i) * 1000, 
//             y : Math.cos(Math.PI / 18 * i) * 1000
//           });
//           i ++;
//           this.echartsDataNodes = nodes;
//           console.log(this.echartsDataNodes)
//         });
//         var edges = []
//         res.edges.forEach(edge => {
//           edges.push({
//             source: edge.fromNode + "",
//             target: edge.toNode + "",
//           });
//           this.echartsDataEdges = edges;
//           console.log(this.echartsDataEdges)
//         });
       
//         this.options = {
//           title: {
//             text: '拓扑详情'
//           },
//           tooltip: {},
//           animationDurationUpdate: 1500,
//           animationEasingUpdate: 'quinticInOut',
//           series: [
//             {
//               type: 'graph',
//               layout: 'force',
//               symbolSize: 50,
//               roam: true,
//               force:{
//                 repulsion : 5000
//               },
//               draggable: true,
//               label: {
//                 show: true
//               },
//               edgeSymbol: ['circle'],
//               edgeSymbolSize: [4, 10],
//               edgeLabel: {
//                 fontSize: 20
//               },
//               data: this.echartsDataNodes,
             
//               links:this.echartsDataEdges,
              
//               lineStyle: {
//                 opacity: 0.9,
//                 width: 2,
//                 curveness: 0
//               }
//             }
//           ]
//         };
//       });
//     }
//   },
//   components: {
//     Echart,
//   },
//   props: {
//     cdata: {
//       type: Object,
//       default: () => ({})
//     },
//   },
//   // watch: {
//   //   cdata: {
//   //     handler(newData) {
//   //       this.options = {
//   //         title: {
//   //           text: '拓扑详情'
//   //         },
//   //         tooltip: {},
//   //         animationDurationUpdate: 1500,
//   //         animationEasingUpdate: 'quinticInOut',
//   //         series: [
//   //           {
//   //             type: 'graph',
//   //             layout: 'none',
//   //             symbolSize: 50,
//   //             roam: true,
//   //             // +
//   //             label: {
//   //               show: true
//   //             },
//   //             edgeSymbol: ['circle', 'arrow'],
//   //             edgeSymbolSize: [4, 10],
//   //             edgeLabel: {
//   //               fontSize: 20
//   //             },
//   //             data: this.echartsDataNodes,
//   //             // data: [
//   //             //   {
//   //             //     name: '300',
//   //             //     x: 300,
//   //             //     y: 300
//   //             //   },
//   //             //   {
//   //             //     name: '301',
//   //             //     x: 800,
//   //             //     y: 300
//   //             //   },
//   //             //   {
//   //             //     name: 'Node 3',
//   //             //     x: 550,
//   //             //     y: 100
//   //             //   },
//   //             //   {
//   //             //     name: 'Node 4',
//   //             //     x: 550,
//   //             //     y: 500
//   //             //   }
//   //             // ],
//   //             // links:this.echartsDataEdges,
//   //             links: [
//   //               {
//   //                 source: 'Node 2',
//   //                 target: 'Node 1',
//   //                 label: {
//   //                   show: true
//   //                 },
//   //                 lineStyle: {
//   //                   curveness: 0.2
//   //                 }
//   //               },
//   //               {
//   //                 source: "300",
//   //                 target: "301"
//   //               },
//   //               {
//   //                 source: 'Node 2',
//   //                 target: 'Node 3'
//   //               },
//   //               {
//   //                 source: 'Node 3',
//   //                 target: 'Node 4'
//   //               },
//   //               {
//   //                 source: 'Node 1',
//   //                 target: 'Node 4'
//   //               }
//   //             ],
//   //             lineStyle: {
//   //               opacity: 0.9,
//   //               width: 2,
//   //               curveness: 0
//   //             }
//   //           }
//   //         ]
//   //       };
//   //     },
//   //     immediate: true,
//   //     deep: true
//   //   }
//   // },
//   mounted() {
//     this.getTopoList();
//     // 初始化图表

//   }
// }
</script>
<!-- <script>
import Echart from '@/common/echart'
export default {
  data () {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    },
  },
  watch: {
    cdata: {
      handler (newData) {
        this.options = {
          tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(255,255,255,0.1)",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
                backgroundColor: "#7B7DDC"
              }
            }
          },
          legend: {
            data: ["已贯通", "计划贯通", "贯通率"],
            textStyle: {
              color: "#B4B4B4"
            },
            top: "0%"
          },
          grid: {
            x: "8%",
            width: "88%",
            y: "4%"
          },
          xAxis: {
            data: newData.category,
            axisLine: {
              lineStyle: {
                color: "#B4B4B4"
              }
            },
            axisTick: {
              show: false
            }
          },
          yAxis: [
            {
              splitLine: { show: false },
              axisLine: {
                lineStyle: {
                  color: "#B4B4B4"
                }
              },

              axisLabel: {
                formatter: "{value} "
              }
            },
            {
              splitLine: { show: false },
              axisLine: {
                lineStyle: {
                  color: "#B4B4B4"
                }
              },
              axisLabel: {
                formatter: "{value} "
              }
            }
          ],
          series: [
            {
              name: "贯通率",
              type: "line",
              smooth: true,
              showAllSymbol: true,
              symbol: "emptyCircle",
              symbolSize: 8,
              yAxisIndex: 1,
              itemStyle: {
                normal: {
                  color: "#F02FC2"
                }
              },
              data: newData.rateData
            },
            {
              name: "已贯通",
              type: "bar",
              barWidth: 10,
              itemStyle: {
                normal: {
                  barBorderRadius: 5,
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#956FD4" },
                    { offset: 1, color: "#3EACE5" }
                  ])
                }
              },
              data: newData.barData
            },
            {
              name: "计划贯通",
              type: "bar",
              barGap: "-100%",
              barWidth: 10,
              itemStyle: {
                normal: {
                  barBorderRadius: 5,
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "rgba(156,107,211,0.8)" },
                    { offset: 0.2, color: "rgba(156,107,211,0.5)" },
                    { offset: 1, color: "rgba(156,107,211,0.2)" }
                  ])
                }
              },
              z: -12,
              data: newData.lineData
            }
          ]
        }
      },
      immediate: true,
      deep: true
    },
  },
}
</script> -->